<template>
    <transition :name="tName">
        <v-touch v-on:swiperight="" class="content" data-touchmove-con>
            <div class="addressbook-title">
                <span class="address-left mui-icon mui-icon-back" @click="backRoute()"></span>
                <span>{{ $t('m.my.contact.list.listTitle') }}</span>
                <span class="address-right" @click="myChangeRoute('/my/contact/add')">
                    <img src="@/assets/img/add.png" alt="">
                </span>
            </div>
            <div class="content-address" v-for="(v,k) in contactList" :key="k"
                 ref="touchmove" v-leftMove="{container: '[data-touchmove-con]'}">
                <!--<div class="address-img">-->
                <!--<img src="@/assets/img/2.png" alt="">-->
                <!--</div>-->
                <div class="address-word" @click="goLink(k)">
                    <div>{{ v.title }}</div>
                    <div>ETSC:{{ addressSub(v.address) }}</div>
                    <div>{{ v.tip }}</div>
                </div>
                <div class="delete_item needsClick" @click="delList(k)">
                    {{$t('m.my.address.del')}}
                </div>
            </div>
            <div class="address-data" v-show="contactList.length == 0">
                <div>
                    <img src="@/assets/img/logo-white.png" alt="" style="width: 66px;height: 66px;">
                    <div>{{ $t('m.my.contact.list.prompt[0]') }}</div>
                </div>
            </div>
        </v-touch>
    </transition>
</template>
<script>
    /* eslint-disable */
    export default {
        name: "my_contact_list",
        created() {
            // 判断是否是从转账页面跳转过来的
            if (this.$route.query.url) {
                this.link = this.$route.query.url;
            }
            this.getList();
        },
        mounted() {
            this.$store.dispatch("aBackUrl", "/index/my");
        },
        data() {
            return {
                link: "",
                contactList: [],
                tName: "slide-right",

            }
        },
        methods: {
            getList: function () {
                this.contactList = JSON.parse(localStorage.getItem('contract') ? localStorage.getItem('contract') : "[]");
            },
            goLink: function (k) {
                if (this.link != '') {
                    let obj = this.$route.query;
                    obj.address = this.contactList[k].address;
                    this.myChangeRoute(this.link, obj)
                } else {
                    this.myChangeRoute("/my/contact/edit", {id: k})
                }
            },
            myChangeRoute: function (path, v = {}) {
                // this.$store.dispatch('aTransitionName', {transactionList: "none"})
                this.tName = "none";
                setTimeout(() => {
                    this.changeRoute(path, v)
                }, 50);
            },
            delList(k) {
                let list = JSON.parse(localStorage.getItem('contract'))
                list.splice(k, 1)
                localStorage.setItem('contract', JSON.stringify(list))
                this.getList()
            }

        }
    }
</script>
<style scoped lang="scss">
    @import '../../../assets/css/address.css';
    @import '../../../assets/css/contact.css';
    @import '../../../assets/css/editing.css';

    body {
        background: #ffffff;
    }

    .delete_item {
        position: absolute;
        top: 0;
        right: -60px;
        width: 60px;
        height: 100%;
        line-height: 80px;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        text-align: center;
        color: white;
        background: red;
    }

</style>